import React, { Component } from 'react';
import {
  Text,
  View,
  TouchableOpacity,
} from 'react-native';
import { StackNavigator} from 'react-navigation';

export default class TimerScreen extends Component{
    static navigationOptions={
        title: 'Timer',
    };

    constructor(props){
        super(props);
        this.state={
           num:0,     
        };
    }

    componentDidMount(){
        this.timer=setTimeout(
            ()=>{
                console.log('把一个定时器的引用挂载this上');
                this.setState({
                    num:2,
                });
            },
            500
        );
    }


    componentWillUnmount(){
         this.timer && clearTimeout(this.timer);
    }

    render(){
        const {navigate} =this.props.navigation;

        return(
            <View>
                <Text style={{fontSize:24}}>{this.state.num}</Text>
                <TouchableOpacity>
             <MyButton label="Press me!"/>
             </TouchableOpacity>
            </View>
        );
    }
}

const MyButton=React.createClass({

    setNativeProps(nativeProps){
        this._root.setNativeProps(nativeProps);
    },

    render(){
        return(
            <View ref={component => this._root=component} {...this.props}>
                <Text>{this.props.label}</Text>
            </View>
        );
    },
});